<template>
    <div style="background-color: aquamarine;">
        <router-view></router-view>
        <!-- replace不留下历史记录 -->
        <router-link replace to="/Login">Login</router-link>
        <router-link :to="{ name: 'Login' }">Login</router-link>
        <a href="/Login">Login</a><!-- 会刷新页面 -->
        <button @click="toPage('/Login')">Login</button>
        <button @click="toPage1('Login')">Login</button>
    </div>
</template>

<script setup lang='ts'>
import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (url: string) => {
    router.push(url)
    // router.replace(url) //不留下历史记录
    // router.go(1)
    // router.go(-1)
    // router.back
}

const toPage1 = (name: string) => {
    router.push({
        name: name
    })
}


// 跨组件传参
type Item = {
    name: string; price: number; id: number;
}
const toDetail = (item: Item) => {
    router.push({
        path: '/reg',
        query: item
    })
}
//参数不存在路径上
const toDetail2 = (item: Item) => {
    router.push({
        name: 'Login',
        params: item
    })
}
// path: "/Login/:id"
const toDetail3 = (item: Item) => {
    router.push({
        name: 'Login2',
        params: {
            id: item.id 
        }
    })
}
</script>

<style scoped lang="scss"></style>